import { h } from 'preact';
import { useCallback } from 'preact';
import { Row, Col } from "@preact/grid";
import { DropDown } from "@preact/base/input";  
import { SUPPORT_TYPES, CHART_TYPE_LISTS } from "@charm:data/model/constant";
import { envoke } from "@store";
import "@static:css/components/tools/index.less";

const Chartype = () => {
    return <div className="chart-type">
        <Row>
            <Col cols="8">
                类型
            </Col>
            <Col cols="16">
                <DropDown lists={SUPPORT_TYPES} />
            </Col>
        </Row>
    </div>
}

const ChartList = ({pid}) => {

    return <div className="chart-list">
        <ul>
            {CHART_TYPE_LISTS.map((e, key) => {
                return <li key={key} className="c-ui-toolbar-item" onClick={e => {
                            envoke(pid, 'addList', null);
                        }}>
                            {e.label}
                        </li>
            })}
        </ul>
    </div>
}

const EditOperation = () => {
    return <div className="editor-operation">
        <ul>
            <li className="c-ui-toolbar-item" onClick={e => console.log('onClick => ', e)}>
                导入配置
            </li>
        </ul>
    </div>
}

export function UIToolbar(props){
    const {
        pid
    } = props;
    return <Row className="c-ui-toolbar">
        <Chartype pid={pid} />
        <ChartList pid={pid} />
        <EditOperation pid={pid} />
    </Row>
    

}